<template>
  <input-angle style="z-index: 6" :style="{ width: width + 'px' }">
    <div :id="id" class="child-box" :style="{ height: height + 'px' }">
      <div class="child-body" @click="checkDate">
        <div class="start-time">
          <p>{{ pitchData.startTime ? pitchData.startTime : '未选择' }}</p>
        </div>
        <div style="width: 16px; height: 1px; background-color: white"></div>
        <div class="end-time">{{ pitchData.endTime ? pitchData.endTime : '未选择' }}</div>
        <el-icon size="16" style="margin-right: 17px" :color="'#e9e9eb'">
          <ArrowDown />
        </el-icon>
      </div>
      <div style="display: flex; flex-direction: row">
        <div v-show="showCheckDate" :style="{ marginLeft: left ? '-65px' : '' }" class="check-one">
          <div
            v-for="(item, index) in checkData"
            :key="index"
            class="one-content"
            @click="checkTime(item)"
          >
            <p style="margin-left: 16px" :style="{ color: item == nowCheck ? '#2B80ECFF' : '' }">{{
              item
            }}</p>
            <img
              v-show="item == nowCheck"
              style="margin-right: 20px"
              src="@/assets/images/components/customDatePicker/pitchOn.png"
            />
          </div>
          <div v-show="customDate" class="one-content" @click="checkCustom">
            <p style="margin-left: 16px">自定义时间</p>

            <el-icon size="16" style="margin-right: 20px" :color="'#e9e9eb'">
              <ArrowRightBold />
            </el-icon>
          </div>
        </div>
        <div v-show="customCheckShow" :class="[left ? 'custom-check-left' : 'custom-check']">
          <a-date-picker
            v-model="dateStart"
            format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择开始时间"
            :get-popup-container="getPopupContainer"
            style="width: 320px; height: 42px; margin-top: 20px; color: white; z-index: 1300"
            show-time
            @change="startChange"
          />
          <a-date-picker
            v-model="dateEnd"
            style="width: 320px; height: 42px; margin-top: 8px"
            format="YYYY-MM-DD HH:mm:ss"
            show-time
            :get-popup-container="getPopupContainer"
            placeholder="请选择结束时间"
            @change="endChange"
          />
        </div>
      </div>
    </div>
  </input-angle>
</template>
<script>
  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
  import dayjs from 'dayjs';
  import inputAngle from '@/views/basic/components/inputAngle.vue';
  export default defineComponent({
    name: 'CustomDatePicker',
    components: { inputAngle },
    props: {
      id: {
        type: [Number, String],
        default: 'auth',
      },
      height: {
        type: [Number, String],
        default: '30',
      },
      width: {
        type: [Number, String],
        default: '490',
      },
      /**
       * 是否显示自定义事件选项
       */
      customDate: {
        type: Boolean,
        default: true,
      },
      left: {
        type: Boolean,
        default: false,
      },
    },
    setup(props, context) {
      onMounted(() => {
        reset();
        // state.pitchData = {
        //   startTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        //   endTime: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
        // };
      });
      const checkData = ['今日', '本周', '本月', '本季度', '本半年度', '本年度'];
      const state = reactive({
        nowCheck: '今日',
        customCheckShow: false,
        showCheckDate: false,
        dateStart: '',
        dateEnd: '',
        pitchData: {},
      });

      const getPopupContainer = () => {
        return document.getElementById(props.id);
      };

      /**
       * 点击快捷时间选项的回调
       * @param {stirng} e checkData[i]
       */
      const checkTime = (e) => {
        console.log(e);
        sessionStorage.setItem('checkData', e);
        // if (e == '本周') {
        //   userStore.mapChangeYear(false);
        //   userStore.mapChangeWeek(true);
        // } else if (e == '本年度') {
        //   userStore.mapChangeYear(true);
        //   userStore.mapChangeWeek(false);
        // }
        state.nowCheck = e;
        state.pitchData = dateUtil(e);
        state.showCheckDate = false;
        state.customCheckShow = false;

        context.emit('changeType', state.pitchData.nowType);
      };
      const checkCustom = () => {
        state.nowCheck = '自定义';
        state.customCheckShow = true;
      };
      const checkDate = () => {
        state.showCheckDate = !state.showCheckDate;
        state.customCheckShow = false;
      };
      /**
       * 时间计算
       * @param {stirng} type checkData[i]
       */
      const dateUtil = (type) => {
        const quarterOfYear = require('dayjs/plugin/quarterOfYear'); //dayjs 季度插件
        dayjs.extend(quarterOfYear);
        let val = {};
        let nowType;
        switch (type) {
          case '今日':
            val = {
              startTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
              endTime: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
            };
            nowType = '1';
            break;
          case '本周':
            const timestamp = Math.round(new Date())
 
            const date = new Date(timestamp)
      
            const weekday = date.getDay()
      
            const we = weekday === 0 ?  - 1 : 0
            //周日的时候 会默认到下周 变量we处理
            val = {
              startTime: dayjs().add(we, 'week').startOf("week").add(1, "day").format('YYYY-MM-DD HH:mm:ss'),
              endTime: dayjs().add(we, 'week').endOf('week').add(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
            };
            nowType = '2';
            break;
          case '本月':
            val = {
              startTime: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
              endTime: dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss'),
            };
            nowType = '3';
            break;
          case '本季度':
            val = {
              startTime: dayjs().startOf('quarter').format('YYYY-MM-DD HH:mm:ss'),
              endTime: dayjs().endOf('quarter').format('YYYY-MM-DD HH:mm:ss'),
            };
            nowType = '4';
            break;
          case '本半年度':
            const month = dayjs().month();
            if (month <= 6) {
              // 上半年
              val = {
                startTime: dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss'),
                endTime: dayjs().endOf('year').subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss'),
              };
            } else {
              // 下半年
              val = {
                startTime: dayjs().startOf('year').add(6, 'month').format('YYYY-MM-DD HH:mm:ss'),
                endTime: dayjs().endOf('year').format('YYYY-MM-DD HH:mm:ss'),
              };
            }
            nowType = '5';
            break;
          case '本年度':
            val = {
              startTime: dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss'),
              endTime: dayjs().endOf('year').format('YYYY-MM-DD HH:mm:ss'),
            };
            nowType = '5';
            break;
          default:
            break;
        }
        return { ...val, nowType };
      };
      const disabledDateStart = (current) => {
        if (state.dateEnd) {
          return current > dayjs(state.dateEnd).endOf('day');
        }
      };
      const disabledDateEnd = (current) => {
        if (state.dateStart) {
          return current < dayjs().endOf('day');
        }
      };
      const startChange = (e) => {
        state.dateStart = e;
        if (state.dateEnd) {
          state.pitchData.startTime = e.format('YYYY-MM-DD HH:mm:ss');
          state.pitchData.endTime = state.dateEnd.format('YYYY-MM-DD HH:mm:ss');
          state.customCheckShow = false;
          state.showCheckDate = false;
        }
      };
      const endChange = (e) => {
        state.dateEnd = e;
        if (state.dateStart) {
          state.pitchData.startTime = state.dateStart.format('YYYY-MM-DD HH:mm:ss');
          state.pitchData.endTime = e.format('YYYY-MM-DD HH:mm:ss');

          state.customCheckShow = false;
          state.showCheckDate = false;
        }
      };

      const reset = () => {
        state.pitchData = {
          startTime: dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
          endTime: dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'),
        };

        state.showCheckDate = false;
        state.customCheckShow = false;
      };

      return {
        ...toRefs(state),
        checkData,
        checkTime,
        checkCustom,
        checkDate,
        disabledDateStart,
        disabledDateEnd,
        startChange,
        endChange,
        getPopupContainer,

        reset,
      };
    },
  });
</script>
<style lang="less" scoped>
  .child-box {
    width: 100%;
    height: 100%;

    .child-body {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;

      .start-time {
        flex: 1;
        color: white;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .end-time {
        flex: 1;
        color: white;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .check-one {
      background: url(@/assets/images/components/customDatePicker/bg1.png) no-repeat;
      width: 490px;
      z-index: 999;
      margin-top: 15px;

      background-size: 100% 100%;

      .one-content {
        width: 490px;
        height: 42px;
        color: #ffffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
      }
    }

    .custom-check {
      background: url(@/assets/images/components/customDatePicker/bg2.png) no-repeat;
      background-size: 100% 100%;
      width: 360px;
      height: 460px;
      position: absolute;
      margin-left: 500px;
      margin-top: 219px;
      padding-left: 20px;
      // display: flex;
      // flex-direction: column;
      // align-items: center;
    }

    .custom-check-left {
      background: url(@/assets/images/components/customDatePicker/bg2.png) no-repeat;
      background-size: 100% 100%;
      width: 360px;
      height: 460px;
      position: absolute;
      margin-left: -435px;
      margin-top: 219px;
      padding-left: 20px;
      // display: flex;
      // flex-direction: column;
      // align-items: center;
    }
  }

  :deep .ant-picker:hover {
    border: 1px solid rgba(255, 255, 255, 0);
    border-right-width: 0;
  }

  :deep .ant-picker-focused {
    border: 1px solid rgba(255, 255, 255, 0);
    border-right-width: 0;
  }

  :deep .ant-picker {
    background-color: #3d618a54;
    border: 1px solid rgba(0, 0, 0, 0);
  }

  :deep .ant-picker-input > input {
    color: white;
  }

  :deep .ant-picker-panel-container {
    background: url(@/assets/images/components/customDatePicker/bg1.png) no-repeat;
    background-size: 100% 100%;
  }

  :deep .ant-picker-content th {
    color: white !important;
  }

  :deep .ant-picker-cell {
    color: #acacac;
  }

  :deep .ant-picker-cell-in-view {
    color: white;
  }

  :deep .ant-picker-datetime-panel .ant-picker-time-panel {
    border-left: 1px solid #60aaff;
  }

  :deep .ant-picker-header {
    color: white;
    border-bottom: 1px solid #60aaff;

    .ant-picker-next-icon {
      color: white;
    }

    .ant-picker-super-prev-icon {
      color: white;
    }

    .ant-picker-prev-icon {
      color: white;
    }

    .ant-picker-super-next-icon {
      color: white;
    }
  }

  :deep .ant-picker-panel .ant-picker-footer {
    border-top: 1px solid #60aaff;
    border-bottom: 0px solid #60aaff;
  }

  :deep .ant-picker-today-btn {
    color: white;
  }

  :deep .ant-picker-today-btn {
    background-color: #ffffff00 !important;
  }

  :deep
    .ant-picker-time-panel-column
    > li.ant-picker-time-panel-cell-selected
    .ant-picker-time-panel-cell-inner {
    background: #1890ff !important;
  }

  :deep
    .ant-picker-time-panel-column
    > li.ant-picker-time-panel-cell
    .ant-picker-time-panel-cell-inner {
    color: white;
  }
</style>
